<%-- 
    Document   : add
    Created on : 05.05.2011, 11:44:24
    Author     : nico
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="u" uri="http://nixis.de/jsp/tags/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
    <head>
        <title>${it.update ? 'Edit' : 'Create multiple'} articles / tasks</title>
    </head>
    <body>
        <h1>${it.update ? 'Edit' : 'Create multiple'} articles / tasks</h1>
        <form id="add-article-form" method="post" action="<u:url value="/article/batch" />">
            <c:forEach var="article" items="${it.articles}">
                <fieldset>
                    <input type="text" size="50" name="title" value="${article.title}"/>, filed under 
                    <input type="text" name="topics" id="article-topics" value="${article.topics}"/>
                    <input type="hidden" name="id" value="${it.update && article.id ? article.id : -1}" />
                    <input type="button" class="add" value="+" />
                </fieldset>
            </c:forEach>
            <fieldset>
                <small>(separate topics using comma)</small>
            </fieldset>
            <fieldset>
                <label for="article-content">Placeholder text (for all articles): </label>
                <textarea cols="80" rows="2" name="content">${it.content}</textarea>
            </fieldset>
            <fieldset>
                <input type="submit" value="submit" />
            </fieldset>
        </form>
        <script type="text/javascript">
            $(function() {
                var htmlString = '<fieldset>\
                    <input type="text" size="50" name="title" value=""/>, filed under \
                    <input type="text" name="topics" value=""/>\
                    <input type="button" class="add" value="+" />\
                    <input type="button" class="remove" value="-" />\
                    <input type="hidden" name="id" value="-1" />\
                </fieldset>';
                
                function removeArticle() {
                    $(this).parent().remove();
                }
                
                function addArticle() {
                    var element = $(htmlString);
                    element.insertAfter($(this).parent())
                        .find(".remove")
                            .click(removeArticle)
                            .end()
                        .find(".add")
                            .click(addArticle)
                            .end();
                }
                
                $("#add-article-form .add").click(addArticle);
            });
        </script>
    </body>
</html>